<template>
  <div id="app">
    <el-container>
      <el-header style="padding: 0; border-bottom:2px solid rgb(65, 141, 255);" >
        <div style="width:100%;height:61px;position:fixed;z-index: 1;">
          <el-menu
          class="el-menu-demo"
          mode="horizontal"
          background-color="rgba(0,0,0,0.01)">
          <el-menu-item index="1" class="lt">
            <i class="el-icon-setting"></i>欢迎来到管理系统
            </el-menu-item>
          <el-submenu index="2" class="lt rt" >
            <template slot="title">
              <i class="el-icon-user"></i>当前用户:{{userName}}
            </template>
            <el-menu-item class="lt" >
              <el-menu-item index="" style="text-align:center;">
                <el-link href="/" :underline="false" class="el-icon-switch-button" style="font-size:16px">退出登录</el-link>
                </el-menu-item>
            </el-menu-item>
          </el-submenu>
        </el-menu>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px" style="position:fixed; border-right:1px solid gray;height:100%">
          
          <el-row>
            <el-col :span="12">
                <el-menu :default-active="$route.path" class="el-menu-vertical-demo" background-color="rgba(0, 0, 0, 0)">
                  <el-menu-item index="/statistics" @click="changepage">
                    <i class="el-icon-document"></i>
                    <span slot="title">漏洞统计</span></span>
                    </el-menu-item> 
                  <el-menu-item index="/users" @click="changepage">
                    <i class="el-icon-user-solid"></i>
                    <span slot="title">用户管理</span>
                  </el-menu-item>
                  <el-menu-item  index="/servertab" @click="changepage">
                    <i class="el-icon-tickets"></i>
                    <span slot="title">服务器管理</span>
                  </el-menu-item>
                  <el-menu-item index="/loophole" @click="changepage">
                    <i class="el-icon-menu"></i>
                    <span slot="title">漏洞管理</span></span>
                  </el-menu-item>
                  <el-menu-item index="/loopholedeal" @click="changepage">
                    <i class="el-icon-menu"></i>
                    <span slot="title">漏洞处理</span></span>
                  </el-menu-item>
                  </el-menu>
            </el-col>
          </el-row>
        </el-aside>
      <el-container>
        <el-main style="margin-left:201px;overflow:auto;height:650px"><router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userName: "",
    };
  },
  methods: {
    changepage: function (that) {
      this.$router.push({
        path: that.index,
        query: {
          userName: this.userName,
        },
      });
    },
  },
  created() {
    if (
      navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      )
    ) {
      this.$router.push("/carry");
    }
    this.$axios.post("/safesys/api/user/search", {}).then((res) => {
      this.userName = res.data.username;
      if (this.userName == undefined) {
        this.$message({
          duration: 600,
          dangerouslyUseHTMLString: true,
          message: '<i class="el-icon-loading"></i>无效登录，正在返回',
        });
        setTimeout(() => {
          this.$router.push("/");
        }, 500);
      } else {
        this.$message({
          duration: 1000,
          dangerouslyUseHTMLString: true,
          message: "欢迎您,用户" + this.userName,
        });
      }
    });
  },
};
</script>
<style scoped>
.el-row,
.el-col {
  width: 100%;
}
.el-menu-item {
  background-color: rgba(255, 255, 255, 0) !important;
}
.lt {
  width: 300px;
  background-color: rgba(56, 53, 53, 0) !important;
}
.rt {
  margin-left: 70%;
  position: absolute;
}
</style>
